import React, { useEffect, useState } from 'react'
import { StyleSheet, Text, Image, View, SafeAreaView, ScrollView } from 'react-native'
import { ListItem } from '@rneui/base';
import Ionicons from 'react-native-vector-icons/Ionicons';
import storage from '../../utils/storage'
import Dialog from '../../components/dialog'
import Card from '../../components/card'

const defaultHeader = require('../../assets/images/default_header.png')

export default function User({ navigation }) {
  const userList = [
    {
      title: '挂号订单',
      icon: 'calendar-outline',
      color: '#333',
      func:()=>{
        navigation.push('OrdersPage');
      }
    },
    {
      title: '处方信息',
      icon: 'document-text-outline',
      color: '#333',
      func:()=>{
        navigation.push('OrdersPage');
      }
    },
    {
      title: '修改个人信息',
      icon: 'settings-outline',
      color: '#333',
      func:()=>{
        navigation.push('OrdersPage');
      }
    },
    {
      title: '退出登录',
      icon: 'log-out-outline',
      color: '#333',
      func: () => {
        setDialogVisible(true);
      },
    },
  ];

  const [userData, setUserData] = useState({});
  const [dialogVisible, setDialogVisible] = useState(false);

  useEffect(() => {
    getUserData();
  }, [])

  // 读取userData
  const getUserData = () => {
    storage.load({
      key: 'userData',
      autoSync: true,
      syncInBackground: true,
    }).then(ret => {
      console.log(ret);
      setUserData(ret);
    }).catch(err => {
      console.log(err);
    });
  }

  const onDetermine = () => {
    // 清除userData
    storage.remove({
      key: 'userData',
    });
    setUserData({});
    setDialogVisible(!dialogVisible);
  }

  const onCancel = () => {
    setDialogVisible(!dialogVisible);
  }

  const goLogin = () => {
    navigation.push('LoginPage');
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <Card headType={true}>
          <View style={styles.headerBox}>
            <Image
              source={defaultHeader}
              style={styles.headerImg}
            >
            </Image>
            <View
              style={styles.headerTextBox}
            >
              <Text
                style={styles.headerTextTop}
              >
                {
                  userData?.patientName ? userData?.patientName :
                    <View style={styles.headerTextLogin}>
                      <Text style={styles.headerTextLoginText} onPress={goLogin}>未登录</Text>
                      <Ionicons name="chevron-forward-outline" size={25} color="#999" />
                    </View>
                }
              </Text>
              <Text style={styles.headerTextBottom}>{userData?.patientTel || '请登录'}</Text>
            </View>
          </View>
          {
            userList.map((item, index) => {
              return <ListItem
                bottomDivider
                key={index}
                onPress={item.func || null}
              >
                <Ionicons name={item.icon} size={20} color={item.color} />
                <ListItem.Content>
                  <ListItem.Title>{item.title}</ListItem.Title>
                </ListItem.Content>
                <ListItem.Chevron />
              </ListItem>
            })
          }
        </Card>
      </ScrollView>
      <Dialog
        onDetermine={onDetermine}
        onCancel={onCancel}
        dialogIsVisible={dialogVisible}
        dialogTitle='确认退出？'
        dialogContent='退出后需要重新登录'
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
  },
  heading: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff'
  },
  headerBox: {
    borderColor: '#DEDEDE',
    borderStyle: 'solid',
    borderBottomWidth: 0.5,
    borderTopWidth: 0.5,
    padding: 16,
    width: '100%',
    flexDirection: "row",
  },
  headerImg: {
    width: 50,
    height: 50,
    borderRadius: 25
  },
  headerTextBox: {
    marginLeft: 12,
    justifyContent: 'space-between',
  },
  headerTextTop: {
    fontSize: 18,
  },
  headerTextLogin: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerTextLoginText: {
    lineHeight: 25,
    fontSize: 18,
  },
  headerTextBottom: {
    fontSize: 16,
  }
})